<div id="call-container">
	<div id="user-settings-container" *ngIf="!joinSessionClicked && !closeClicked">
		<ov-user-settings (onJoinClicked)="onJoinClicked()" (onCloseClicked)="onLeaveSessionClicked()"></ov-user-settings>
	</div>

	<div id="spinner" *ngIf="joinSessionClicked && !isSessionAlive && !error">
		<mat-spinner [diameter]="50"></mat-spinner>
		<span>Joining the room ...</span>
	</div>

	<div id="spinner" *ngIf="joinSessionClicked && !isSessionAlive && error">
		<mat-icon class="error-icon">error</mat-icon>
		<span>{{errorMessage}}</span>
	</div>

	<div id="room-container" *ngIf="joinSessionClicked && isSessionAlive && !error">
		<ov-room [tokens]="_tokens">
			<ng-template #toolbar>
				<ov-toolbar
					(onCamClicked)="onCamClicked()"
					(onMicClicked)="onMicClicked()"
					(onScreenShareClicked)="onScreenShareClicked()"
					(onSpeakerLayoutClicked)="onSpeakerLayoutClicked()"
					(onLeaveSessionClicked)="onLeaveSessionClicked()"
				></ov-toolbar>
			</ng-template>
			<ov-layout layout></ov-layout>
		</ov-room>
	</div>
</div>
